/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'
import { Input } from '@tarojs/components'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http } from '../../library/func';
import Icon from '../../project/style/icon';
import DoHttp from '../../project/func/http/http';

// 引入自定义组件
import proj_Prod_List from '../../project/comp/prodList/proj_Prod_List'
/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class ProductList extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			cid:0,
			background: '#f60',
			status: 'success',
			// 商品列表
			list:[],
			// 搜索框的值
			inputValue:'',
			// 点击过滤项变色
			change: ''
		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {
		// 获取用户信息，判定身份
		DoHttp.get({
			url: 'usercenter/info.php',
			
			success: (data)=> {
				console.log('用户信息', data)
				this.setState({
					userInfo: data
				})
			},
			error: (res)=> {
				console.log('逻辑错误');
				console.log(res);
			},
		});

	}
	
	componentWillMount(){
		let cid = this.$router.params.cid;
		this.setState({
			cid:cid,
		})
		DoHttp.Loading({
			url: 'product/list.php',
			data: {
				cid:cid
			},
			success: (data)=> {
				console.log('成功');
				console.log(data);
				this.setState({
					list: data
				})
			},
			error: (res)=> {
				console.log('逻辑错误');
				console.log(res);
			},
		});

	}




	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (id, e)=> {
		console.log('onClick: ' + id)
    }
    
    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {
		wx.navigateTo({
			url: url
		})

	}

	// 搜索框文本值
	inputChange = (e) =>{
		this.setState({
			inputValue: e.detail.value
		})
	}

	// 用户搜索商品
	searchProd = () => {
		this.getHttpproduct();
	}

	// 请求接口方法
	getHttpproduct = () => {
		let data = {};
		if(this.state.cid){
			data.cid=this.state.cid
		}
		if(this.state.change){
			data.sorttype=this.state.change
		}
		if(this.state.inputValue){
			data.keyword=this.state.inputValue
		}
		
		DoHttp.Loading({
			url:'product/list.php',
			data:data,
			success:(data)=>{
				this.setState({
					list:data
				})
			}
		})	
	}
	
	// 用户搜索商品
	searchProd = () => {
		DoHttp.Loading({
			url:'product/list.php?keyword=' + this.state.inputValue,
			success:(data)=>{
				this.setState({
					list:data
				})
			}
		})
	}

	// 过滤商品
	filter = (type, e) =>{
		if(type.indexOf('price') != -1){
			if(this.state.change == 'priceASC'){
				type = 'priceDESC';
			}
			if(this.state.change == 'priceDESC'){
				type = 'priceASC';
			}
		}
		
		this.setState({
			change: type
		},()=>{
			this.getHttpproduct();
		})
	}

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	config = {
        navigationBarTitleText: '商品列表',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		return (
			<CPage>
				<CContent>

					{/* 商品列表 */}
					<proj_Prod_List data={this.state.list} isvip={this.state.userInfo.is_vip}></proj_Prod_List>

				</CContent>

				{/* 搜索框 */}
				<CHeader bg='#fff' h='200' bb='1 solid #f6f6f6'>
					<CColumn>
						<CBetween pa='20'>
							{/* <CSvg icon={Icon.back} w='22' h='22'></CSvg> */}
							<CLine bg='#ededed' ra='100' mx='10' px='10' h='70'>
								<CSvg icon={Icon.search} w='40' h='40' color='#848484'></CSvg>
								<Input 
									type='text' 
									placeholder='请输入商品标题' 
									class='searchInput' 
									placeholderStyle='font-size:28rpx;color:#b7b7b7;'
									style='font-size:28rpx; margin-left:16rpx; margin-top:6rpx; width:80%'
									onInput = {this.inputChange}
									focus={this.state.focusBool}
								/>
							</CLine>
							<CHand onClick={this.searchProd}>
								<CText size='30' color='#d42242'>搜索</CText>
							</CHand>
						</CBetween>

						<CBetween h='80'>
							<CLine br='1 solid #f1f1f1' x='center' style={this.state.change == 'new' ? 'color:#cb2e24' : ' '} size='28'  onClick={this.filter.bind(this, 'new')}>最新</CLine>
							<CLine br='1 solid #f1f1f1' x='center' style={this.state.change == 'sale' ? 'color:#cb2e24' : ' '}><CText size='28' onClick={this.filter.bind(this, 'sale')}  color={this.state.change=='sale' ? '#cb2e24' : ' '}>销量</CText></CLine>
							<CLine x='center' onClick={this.filter.bind(this, 'priceASC')}><text style={this.state.change == 'priceASC' || this.state.change == 'priceDESC' ? 'color:#cb2e24; font-size:28rpx' : 'font-size:28rpx'}>价格</text><CSvg icon={Icon.updown} w='40' h='40'></CSvg></CLine>
						</CBetween>
					</CColumn>
					
				</CHeader>

				{/* 回到顶部 */}
				{/* <CFloat h='50' w='50' right='10' bottom='60' bg='#909090' ra='50' x='center' y='center'>
					<CItemY mt='-10'>
						<CSvg icon={Icon.upper} w='30' h='20'></CSvg>
						<CText color='#fff'>顶部</CText>
					</CItemY>
				</CFloat> */}
			</CPage>
		)
	}
}


